<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="my-location">我的当前位置：</div>
    <button onclick="myGetCurrentPosition()"> getCurrentPosition 获取位置</button>
    <button onclick="myWatchPosition()"> watchPosition 获取位置</button>
    <script>

        var divObj = document.getElementById("my-location");

        function myGetCurrentPosition() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            }
        }

        function showPosition(position) {
            // position.coords.latitude; 纬度
            // position.coords.longitute; 经度
            divObj.innerHTML = "经度=" + position.coords.longitute + ",维度=" + position.coords.latitude;
        }

        // 错误处理
        function showError(PositionError) {
            switch (PositionError.code) {
                case PositionError.PERMISSION_DENIED:
                    alert("权限不足");
                    break;
                case PositionError.POSITION_UNAVAILABLE:
                    alert("位置不可用");
                    break;
                case PositionError.TIMEOUT:
                    alert("超时");
                    break;
                case PositionError.UNKNOWN_ERROR:
                    alert("未知错误");
                    break;
            }
        }

        function myWatchPosition() {
            if(navigator.geolocation){
                navigator.geolocation.watchPosition(showPosition, showError);
            }
        }
    </script>
</body>

</html>